<!-- 权限页面 -->
<template>
  <div class="content">
    <!-- Form表单查询 -->
    <div class="institutions">
      <i class="iconfont">&#xe665;</i>
      <p class="tissue">用户管理</p>
      <div class="haidun-query">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.user"
              placeholder="用户名/昵称/邮箱"
              size="mini"
              style="width: 150px;"
              @keyup.enter.native="onSubmit"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="Added" size="mini">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table
      id="mytable"
      ref="multipleTable"
      tooltip-effect="dark"
      :data="tableData"
      style="width: 98%;margin-left: 1%;margin-top: 10px;"
      max-height="355"
      border
      v-loading="loading"
      header-align="center"
    >
      <el-table-column type="index" :index="indexMethod" fixed align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="status" label="账号状态" :formatter="stateFormat" align="center"></el-table-column>
      <el-table-column prop="icon" label="头像" align="center">
        <template slot-scope="scope">
          <div style="display: flex;justify-content: center;">
            <img
              :src="scope.row.icon"
              @click="head_portrait(scope.$index,scope.row)"
              class="img_amplification"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
      <el-table-column prop="nickName" label="昵称" align="center"></el-table-column>
      <el-table-column prop="note" label="备注信息" align="center"></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="100"
        align="center"
        sortable
        :formatter="dateFormat"
      ></el-table-column>
      <el-table-column
        prop="loginTime"
        label="最后登录时间"
        width="100"
        align="center"
        :formatter="dateFormat"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <div class="user-icon">
            <span class="editor">
              <i class="iconfont" title="编辑" @click="handleEdit(scope.$index, scope.row)">&#xe600;</i>
            </span>
            <span class="delete">
              <i class="iconfont" title="删除" @click="handleDelete(scope.$index, scope.row)">&#xe601;</i>
            </span>
            <span class="power">
              <i class="iconfont" title="分配角色" @click="allot(scope.$index, scope.row)">&#xe7d8;</i>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="admin-bottom">
      <div style="flex:2;margin-top: 15px;margin-left: 10px;">
        <el-button type="primary" icon="el-icon-download" @click="output">导出当前页数据</el-button>
      </div>
      <!-- 分页 -->
      <div class="haidun-paging">
        <el-pagination
          background
          layout="prev, pager, next,sizes"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          :pager-count="totalPage"
          @current-change="interfacedata"
          @next-click="interfacedata"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 20, 30]"
        ></el-pagination>
      </div>
    </div>
    <!-- 弹出框头像 -->
    <el-dialog title="头像" :visible.sync="portrait" width="30%" :before-close="handleClose">
      <div class="portrait">
        <img :src="imgicon" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="portrait = false">取 消</el-button>
        <el-button type="primary" @click="portrait = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
import { mapGetters } from "vuex";
export default {
  name: "admin-permission",
  components: {},
  data() {
    return {
      pageNum: "", // 当前页数
      pageSize: "", // 每页显示条目个数
      total: "", // 总条目数
      totalPage: "", // 总页数
      imgicon: "",
      portrait: false, //头像
      formInline: {
        user: "", // 用户名
        region: "", // 邮箱
        sectionid: "" // 用户id
      },
      // 树形控件
      data: [
        {
          label: "海盾信联",
          children: [
            {
              label: "研发部",
              children: [
                {
                  label: "前端开发部"
                }
              ]
            },
            {
              label: "行政部",
              children: [
                {
                  label: "财务部"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表格控件
      tableData: [],
      loading: true // 数据懒加载动画
    };
  },
  props: {},
  computed: {
    ...mapGetters(["list"])
  },
  methods: {
    // 接口数据
    interfacedata(num) {
      this.pageNum = num;
      var searchPara = {
        username: this.formInline.user, // 用户名
        email: this.formInline.region, // 邮箱
        id: this.formInline.sectionid, // 用户id
        pageNum: num,
        pageSize: this.pageSize
      };
      this.$store
        .dispatch("User_control", searchPara)
        .then(data => {
          this.tableData = data.list;
          this.loading = false;
          this.total = data.total;
          this.pageSize = data.pageSize;
          this.pageNum = data.pageNum;
          this.totalPage = data.totalPage;
        })
        .catch(error => {
          this.$notify.error({
            title: "编辑失败",
            message: `${error}`
          });
        });
    },
    // 调整每页页数
    handleSizeChange(val) {
      this.pageSize = val;
      this.interfacedata(this.pageNum);
    },
    // 新增用户
    Added() {
      this.$router.push({ name: "user_added" });
    },
    // 条件查询
    onSubmit() {
      var searchPara = {
        keyword: this.formInline.user // 用户名/邮箱/昵称
      };
      this.$store
        .dispatch("User_control", searchPara)
        .then(data => {
          this.tableData = data.list;
          this.loading = false;
          this.total = data.total;
          this.pageSize = data.pageSize;
          this.pageNum = data.pageNum;
          this.totalPage = data.totalPage;
        })
        .catch(error => {
          this.$notify.error({
            title: "编辑失败",
            message: `${error}`
          });
        });
    },
    // 分配权限
    allot(index, row) {
      this.$router.push({
        name: "assignroles",
        query: { id: row.id, name: row.username }
      });
    },
    // 编辑操作
    handleEdit(index, row) {
      this.$router.push({
        name: "new_editor",
        query: { id: row.id, name: row.username }
      });
    },
    // 删除操作
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: false
      })
        .then(() => {
          // row.splice(index, 1);
          var cancel = {
            id: row.id
          };
          this.$store.dispatch("User_cancel", cancel).then(data => {
            this.interfacedata(this.pageNum);
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //判断账号状态
    stateFormat(row, column) {
      // console.log(row.status);
      if (row.status == 0) {
        return "禁用";
      } else if (row.status == 1) {
        return "启用";
      }
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    // 头像详情
    head_portrait(index, row) {
      this.portrait = true;
      // console.log("index：" + index + "row: " + JSON.stringify(row));
      this.imgicon = row.icon;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 导出表格数据
    output() {
      var fix = document.querySelector(".el-table__fixed");
      var wb;
      // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
      if (fix) {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#mytable").removeChild(fix)
        );
        document.querySelector("#mytable").appendChild(fix);
      } else {
        /* 从表中生成工作簿对象 */
        wb = XLSX.utils.table_to_book(document.querySelector("#mytable")); //mytable为表格的id名
      }

      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
  },
  watch: {},
  created() {
    this.interfacedata(1);
  },
  mounted() {}
};
</script>

<style scoped>
.institutions {
  position: relative;
  height: 30px;
  display: flex;
  padding-left: 10px;
  padding-bottom: 10px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.tissue {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
/* 表格控件 */
.haidun-query {
  position: absolute;
  right: 20px;
  top: 0;
}

/* 分页 */
.haidun-paging {
  text-align: right;
  margin-top: 15px;
}

.user-icon {
  display: flex;
  justify-content: center;
}
.editor > .iconfont {
  cursor: pointer;
  color: #62c45e;
  margin-right: 10px;
}
.delete > .iconfont {
  cursor: pointer;
  color: #eb4a4a;
  margin-right: 10px;
}
.power > .iconfont {
  cursor: pointer;
}
.img_amplification {
  width: 45px;
  height: 45px;
  margin: 0px;
  cursor: pointer;
}
.portrait img {
  width: 200px;
  height: 200px;
}
.admin-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>